<template>
	<view class="ys">
		<view class="title">
			<text>预约项目</text>
			<view class="name">
				{{activity.name || ''}}
			</view>
		</view>
		<view class="timelist">
			<view :class="timeID == index?'timeitem active':'timeitem'" v-for="(item,index) in list" :key="index"
				@click="changeTime(index,item)">
				<view class="timeli">
					{{item.date}}
				</view>
				<view class="timeli">
					{{item.start_time}}~{{item.end_time}}
				</view>
				<view class="timeli">

				</view>
				<view class="info" :class="{'dis':!item.can_appoint}">
					<view class="people">
						{{item.appoint_count}}/{{item.total_people}}人
					</view>
					<view class="tips">
						<text>{{item.can_appoint?'可预约':'不可预约'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="venueinfo" v-if="time !=''">
			<view class="vli">
				<view class="left">
					预约时间
				</view>
				<view class="right">
					{{time.date}}
				</view>
			</view>
			<view class="vli">
				<view class="left">
					时间段
				</view>
				<view class="right">
					{{time.start_time}}~{{time.end_time}}
				</view>
			</view>
			<view class="vli">
				<view class="left">
					可预约人数
				</view>
				<view class="right">
					{{time.left_appoint}}
				</view>
			</view>
			<view class="vli">
				<view class="left">
					预约类型
				</view>
				<view class="right">
					<radio-group name="" @change="change">
						<label>
							<radio value="1" :checked="type == 1" /><text>个人</text>
						</label>
						<label>
							<radio value="2" :checked="type == 2" /><text>团队</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="vli" v-if="type == 2">
				<view class="left">
					预计人数
				</view>
				<view class="right">
					<input type="number" v-model="people" placeholder="请输入预计人数">
				</view>
			</view>
			<view class="vli">
				<view class="left">
					姓名
				</view>
				<view class="right">
					<input type="text" v-model="name" placeholder="请输入姓名">
				</view>
			</view>
			<view class="vli">
				<view class="left">
					联系方式
				</view>
				<view class="right">
					<input type="number" v-model="phone" placeholder="请输入联系电话">
				</view>
			</view>
			<view class="vli">
				<view class="left">
					证件类型
				</view>
				<view class="right">
					<picker mode="selector" :range="range" @change="changeRange">
						<view>{{rangeText.name}}</view>
					</picker>
				</view>
			</view>
			<view class="vli">
				<view class="left">
					证件号
				</view>
				<view class="right">
					<input type="text" v-model="papers.papersID" placeholder="请输入证件号">
				</view>
			</view>
			<view class="vli textarea">
				<textarea placeholder="请输入预约备注(携带人员信息)" v-model="content"></textarea>
			</view>
			<view class="sumbit">
				<button @click="appointActivity" :disabled="loading" :loading="loading">预约</button>
				<button class="reset" @click="reset">重置</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		activityDateTime,
		appointActivity
	} from "@/api/api.js"
	export default {
		data() {
			return {
				list: [],
				timeID: -1,
				time: [],
				type: '',
				name: '',
				papers: {
					type: 1,
					papersID: ''
				},
				range: ['身份证', '五星卡', '护照'],
				rangeInfo: [{
						name: '身份证',
						type: 1
					},
					{
						name: '五星卡',
						type: 2
					},
					{
						name: '护照',
						type: 3
					}
				],
				content: '',
				rangeText: {
					name: '身份证',
					type: 1
				},
				phone: '',
				people: 1,
				id: '',
				activity: [],
				loading: false
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
			this.activityDateTime()
		},
		methods: {
			activityDateTime() {
				activityDateTime({
					activity_id: this.id
				}).then(res => {
					if (res.status == 1) {
						this.activity = res.data.activity
						this.list = res.data.dateArray
					}
				})
			},
			changeRange(e) {
				this.rangeText = this.rangeInfo[e.detail.value]
				this.papers.type = this.rangeText.type
			},
			appointActivity() {
				if (this.type == '') {
					return uni.$showMsg('请选择预约类型')
				}
				if (this.name == '') {
					return uni.$showMsg('请输入姓名')
				}
				if (this.phone == '') {
					return uni.$showMsg('请输入联系方式')
				}
				if (this.papers.papersID == '') {
					return uni.$showMsg('请输入证件号')
				}
				this.loading = true
				appointActivity({
					activity_id: this.id,
					date: this.time.date,
					name: this.name,
					phone: this.phone,
					conf_id: this.time.id,
					type: this.type,
					number: Number(this.people),
					card_type: this.papers.type,
					card_number: this.papers.papersID,
					remark: this.content
				}).then(res => {
					this.loading = false
					if (res.status == 1) {
						uni.switchTab({
							url: '/pages/appoint/index'
						})
					} else {
						uni.$showMsg(res.msg)
					}
				})
			},
			reset() {
				this.name = ''
				this.phone = ''
				this.papers = {
					type: '',
					papersID: ''
				}
				this.type = ''
				this.rangeText = {
					name: '身份证',
					type: 1
				}
				this.content = ''
			},
			change(e) {
				this.type = e.detail.value
			},
			changeTime(index, item) {
				if (!item.can_appoint) {
					return uni.$showMsg(item.error_text)
				}
				if (this.timeID == index) {
					this.timeID = -1
					this.time = []
				} else {
					this.timeID = index
					this.time = this.list[index]
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding: 10px 0;
		box-sizing: border-box;
	}

	.sumbit {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;

		button {
			width: 80px;
			font-size: 14px;
			margin: 0 10px;
			background: #009B89;
			color: #fff;
		}

		.reset {
			background: #fff;
			color: #000;
		}
	}

	.venueinfo {
		padding: 0 2%;
		box-sizing: border-box;

		.vli {
			display: flex;
			align-items: center;
			border: 1px solid #ccc;
			margin-bottom: 5px;
			font-size: 14px;
			min-height: 35px;
			line-height: 35px;
			border-radius: 5px;
			padding: 2px;

			.left {
				background: transparent;
				color: #005f9b;
				width: 80px;
				text-align: center;
				background: #f7f7f7;
				border-right: 1px solid #ccc;
			}

			.right {
				background: #fafafa;
				flex: 1;
				padding-left: 10px;
				box-sizing: border-box;

				radio {
					transform: scale(.7);

				}

				input {
					width: 100;
					font-size: 14px;
					height: 35px;
					line-height: 35px;
				}
			}

			&.textarea {
				background: #fafafa;

				textarea {
					font-size: 14px;
					padding: 5px;
					width: 100%;
					box-sizing: border-box;
				}
			}
		}
	}

	.timelist {
		padding: 0 2%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;

		.timeitem {
			background: #fff;
			border: 1px solid #ccc;
			width: 31%;
			border-radius: 8px;
			margin: 10px 1%;
			box-sizing: border-box;
			text-align: center;
			font-size: 14px;

			.timeli {
				padding: 5px 0;
			}

			&.active {
				.info {
					background: #d3b82f;
				}
			}

			.info {
				background: #009B89;
				padding: 8px 0;
				color: #fff;
				border-radius: 5px;

				.people {
					margin-bottom: 5px;
				}
			}

			.dis {
				background: #999;
			}
		}
	}

	.title {
		display: flex;
		width: 96%;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-sizing: border-box;
		margin: 5px auto;
		font-size: 12px;
		height: 35px;
		line-height: 35px;

		text {
			display: block;
			width: 80px;
			text-align: center;
			border-right: 1px solid #ccc;
			background: #f2f2f2;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
		}

		.name {
			flex: 1;
			padding-left: 10px;
			box-sizing: border-box;
			background: #fff;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
		}
	}
</style>